import React, { useEffect, useState } from "react";
import { Input, Button, Table, Modal, message } from "antd";
import styles from "./index.less";
import { getMessageTemplateList } from "../../../services/messageTemplateApi";

const TmpsSelect = props => {
  const {
    tmpsOfSelected: listOfSelectedTmps,
    onCheck: setlistOfSelectedTmps,
    onClose,
    visible
  } = props;
  const [listOfTmps, setlistOfTmps] = useState([]);
  const [loading, setLoading] = useState(false);
  const [name, setname] = useState();
  const [code, setcode] = useState();
  const [pageNum, setpageNum] = useState(1);
  const [pageSize, setpageSize] = useState(5);
  const [total, settotal] = useState(0);

  useEffect(() => {
    onSearch();
  }, [pageNum, pageSize]);

  // 查询角色
  function onSearch() {
    const params = {
      pageNum,
      pageSize,
      isEnabled: "Y",
      templateCode: code,
      templateName: name
    };
    setLoading(true);
    getMessageTemplateList(params).then(res => {
      if (res.success) {
        setlistOfTmps(res.datas);
        settotal(res.totalCount);
      } else {
        message.error(res.errMsg);
      }
      setLoading(false);
    });
  }
  // 表格页码变化
  const onPageChange = (cur, size) => {
    setpageNum(cur);
    setpageSize(size);
  };
  // 子组织表格column
  const tmpColumn = [
    {
      title: "消息模版编码",
      dataIndex: "templateCode"
    },
    {
      title: "消息模版名称",
      dataIndex: "templateName"
    },
    {
      title: "消息模版标题",
      dataIndex: "templateTitle"
    },
    {
      title: "来源",
      dataIndex: "creator",
      render: text => <span>{text || "--"}创建</span>
    }
  ];
  // 表格check配置
  const rowSelection = {
    selectedRowKeys: listOfSelectedTmps.map(o => o.templateId),
    onSelect: (record, selected) => {
      if (selected) {
        setlistOfSelectedTmps([record]);
      } else {
        setlistOfSelectedTmps(
          []
          //  listOfSelectedTmps.filter(o => +o.templateId !== record.templateId)
        );
      }
    },
    hideDefaultSelections: true // 去掉全选
    // onSelectAll: selected => {
    //   if (selected) {
    //     // 记录当前表格新增的record
    //     const newRec = [];
    //     listOfTmps.forEach(l => {
    //       if (!listOfSelectedTmps.find(ls => ls.templateId === l.templateId)) {
    //         newRec.push(l);
    //       }
    //     });
    //     setlistOfSelectedTmps(listOfSelectedTmps.concat(newRec));
    //   } else {
    //     // 删除已选择数据中心包含当前表格数据的记录
    //     setlistOfSelectedTmps(
    //       listOfSelectedTmps.filter(
    //         o => !listOfTmps.some(l => l.templateId === o.templateId)
    //       )
    //     );
    //   }
    // }
  };

  return (
    <Modal
      title="选择消息模板"
      visible={visible}
      onCancel={onClose}
      wrapClassName={styles.modalCls}
      footer={[
        <Button key="ok" type="primary" onClick={onClose}>
          确认
        </Button>
      ]}
    >
      <div className={styles.root}>
        <div className={styles.searchBox}>
          <Input
            allowClear
            value={code}
            placeholder="请输入消息模板编码"
            onChange={event => setcode(event.target.value)}
          />
          <Input
            allowClear
            value={name}
            placeholder="请输入消息模板名称"
            onChange={event => setname(event.target.value)}
            style={{ marginLeft: 10 }}
          />
          {/* <Button>重置</Button> */}
          <Button
            loading={loading}
            icon="search"
            type="primary"
            onClick={onSearch}
          >
            查询
          </Button>
        </div>
        <div className={styles.menuTable}>
          <Table
            rowKey="templateId"
            columns={tmpColumn}
            dataSource={listOfTmps}
            rowSelection={rowSelection}
            pagination={{
              pageSize,
              current: pageNum,
              total,
              onChange: onPageChange
            }}
            loading={loading}
          />
        </div>
      </div>
    </Modal>
  );
};

export default TmpsSelect;
